You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.5 KiB
131 lines
3.5 KiB
<script setup lang="ts">
|
|
import { request, unwrapApiBody, type ApiResponse } from '../../../utils/http/factory'
|
|
import { useAuthSession } from '../../../composables/useAuthSession'
|
|
|
|
definePageMeta({ title: '编辑文章' })
|
|
|
|
const route = useRoute()
|
|
const id = computed(() => route.params.id as string)
|
|
const { user } = useAuthSession()
|
|
|
|
const state = reactive({
|
|
title: '',
|
|
slug: '',
|
|
excerpt: '',
|
|
bodyMarkdown: '',
|
|
visibility: 'private',
|
|
shareToken: '' as string | null,
|
|
})
|
|
const loading = ref(true)
|
|
const saving = ref(false)
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
try {
|
|
const res = await request<ApiResponse<{ post: typeof state }>>(`/api/me/posts/${id.value}`)
|
|
const p = unwrapApiBody(res).post
|
|
Object.assign(state, {
|
|
title: p.title,
|
|
slug: p.slug,
|
|
excerpt: p.excerpt,
|
|
bodyMarkdown: p.bodyMarkdown,
|
|
visibility: p.visibility,
|
|
shareToken: p.shareToken ?? null,
|
|
})
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(load)
|
|
|
|
async function save() {
|
|
saving.value = true
|
|
try {
|
|
await request(`/api/me/posts/${id.value}`, {
|
|
method: 'PUT',
|
|
body: {
|
|
title: state.title,
|
|
slug: state.slug,
|
|
excerpt: state.excerpt,
|
|
bodyMarkdown: state.bodyMarkdown,
|
|
visibility: state.visibility,
|
|
},
|
|
})
|
|
await load()
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
async function remove() {
|
|
await request(`/api/me/posts/${id.value}`, { method: 'DELETE' })
|
|
await navigateTo('/me/posts')
|
|
}
|
|
|
|
const shareUrl = computed(() => {
|
|
const slug = user.value?.publicSlug
|
|
if (state.visibility !== 'unlisted' || !state.shareToken || !slug) {
|
|
return ''
|
|
}
|
|
if (import.meta.client) {
|
|
return `${window.location.origin}/p/${slug}/t/${state.shareToken}`
|
|
}
|
|
return ''
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UContainer class="py-8 max-w-3xl space-y-4">
|
|
<div class="flex justify-between">
|
|
<h1 class="text-2xl font-semibold">
|
|
编辑文章
|
|
</h1>
|
|
<UButton to="/me/posts" variant="ghost" color="neutral">
|
|
返回列表
|
|
</UButton>
|
|
</div>
|
|
<div v-if="loading" class="text-muted">
|
|
加载中…
|
|
</div>
|
|
<template v-else>
|
|
<UAlert
|
|
v-if="shareUrl"
|
|
title="仅链接分享"
|
|
:description="shareUrl"
|
|
/>
|
|
<UForm :state="state" class="space-y-4" @submit.prevent="save">
|
|
<UFormField label="标题" name="title" required>
|
|
<UInput v-model="state.title" />
|
|
</UFormField>
|
|
<UFormField label="slug" name="slug" required>
|
|
<UInput v-model="state.slug" />
|
|
</UFormField>
|
|
<UFormField label="摘要" name="excerpt" required>
|
|
<UInput v-model="state.excerpt" />
|
|
</UFormField>
|
|
<UFormField label="正文" name="bodyMarkdown" required>
|
|
<UTextarea v-model="state.bodyMarkdown" :rows="16" class="w-full font-mono text-sm" />
|
|
</UFormField>
|
|
<UFormField label="可见性" name="visibility">
|
|
<USelect
|
|
v-model="state.visibility"
|
|
:items="[
|
|
{ label: '私密', value: 'private' },
|
|
{ label: '公开', value: 'public' },
|
|
{ label: '仅链接', value: 'unlisted' },
|
|
]"
|
|
/>
|
|
</UFormField>
|
|
<div class="flex gap-2">
|
|
<UButton type="submit" :loading="saving">
|
|
保存
|
|
</UButton>
|
|
<UButton color="error" variant="soft" @click="remove">
|
|
删除
|
|
</UButton>
|
|
</div>
|
|
</UForm>
|
|
</template>
|
|
</UContainer>
|
|
</template>
|
|
|